<template>
    <el-form-item :label="$t('storage.http_protocol')">
        <el-radio-group v-model="storage.alioss_http_protocol">
            <el-radio v-for="(item, index) in http_protocols" :key="index" :label="item.value" border>{{ item.title }}</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item :label="$t('storage.region')">
        <el-select v-model="storage.alioss_point" placeholder="请选择" style="width: 300px;">
            <el-option label="华东1 (杭州)" value="oss-cn-hangzhou.aliyuncs.com" />
            <el-option label="华东2 (上海)" value="oss-cn-shanghai.aliyuncs.com" />
            <el-option label="华东5 (南京本地地域)" value="oss-cn-nanjing.aliyuncs.com" />
            <el-option label="华东6 (福州本地地域)" value="oss-cn-fuzhou.aliyuncs.com" />
            <el-option label="华北1 (青岛)" value="oss-cn-qingdao.aliyuncs.com" />
            <el-option label="华北2 (北京)" value="oss-cn-beijing.aliyuncs.com" />
            <el-option label="华北3 (张家口)" value="oss-cn-zhangjiakou.aliyuncs.com" />
            <el-option label="华北5 (呼和浩特)" value="oss-cn-huhehaote.aliyuncs.com" />
            <el-option label="华北6 (乌兰察布)" value="oss-cn-wulanchabu.aliyuncs.com" />
            <el-option label="华南1 (深圳)" value="oss-cn-shenzhen.aliyuncs.com" />
            <el-option label="华南2 (河源)" value="oss-cn-heyuan.aliyuncs.com" />
            <el-option label="华南3 (广州)" value="oss-cn-guangzhou.aliyuncs.com" />
            <el-option label="西南1 (成都)" value="oss-cn-chengdu.aliyuncs.com" />
            <el-option label="中国 (香港)" value="oss-cn-hongkong.aliyuncs.com" />
            <el-option label="美国 (硅谷)" value="oss-us-west-1.aliyuncs.com" />
            <el-option label="美国 (弗吉尼亚)" value="oss-us-east-1.aliyuncs.com" />
            <el-option label="日本 (东京)" value="oss-ap-northeast-1.aliyuncs.com" />
            <el-option label="韩国 (首尔)" value="oss-ap-northeast-2.aliyuncs.com" />
            <el-option label="新加坡" value="oss-ap-southeast-1.aliyuncs.com" />
            <el-option label="澳大利亚 (悉尼)" value="oss-ap-southeast-2.aliyuncs.com" />
            <el-option label="马来西亚 (吉隆坡)" value="oss-ap-southeast-3.aliyuncs.com" />
            <el-option label="印度尼西亚 (雅加达)" value="oss-ap-southeast-5.aliyuncs.com" />
            <el-option label="菲律宾 (马尼拉)" value="oss-ap-southeast-6.aliyuncs.com" />
            <el-option label="泰国 (曼谷)" value="oss-ap-southeast-7.aliyuncs.com" />
            <el-option label="印度 (孟买)" value="oss-ap-south-1.aliyuncs.com" />
            <el-option label="德国 (法兰克福)" value="oss-eu-central-1.aliyuncs.com" />
            <el-option label="英国 (伦敦)" value="oss-eu-west-1.aliyuncs.com" />
            <el-option label="阿联酋 (迪拜)" value="oss-me-east-1.aliyuncs.com" />
        </el-select>
    </el-form-item>
    <el-form-item :label="$t('storage.bucket')">
        <el-input v-model="storage.alioss_bucket" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.http_domain')">
        <el-input v-model="storage.alioss_http_domain" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.access_key')">
        <el-input v-model="storage.alioss_access_key" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.secret_key')">
        <el-input v-model="storage.alioss_secret_key" clearable></el-input>
    </el-form-item>
</template>
<script setup>
import { reactive, watch } from 'vue';
import { useStore } from 'vuex';
// 使用 Vuex store
const store = useStore();
// 接收父组件传递的 HTTP 协议选项
const props = defineProps({
    http_protocols: Array
});
// 定义用于发射更新事件的方法
const emit = defineEmits(['update-storage']);
// 本地存储配置的响应式对象
const storage = reactive({
    alioss_http_protocol: '',
    alioss_point: '',
    alioss_bucket: '',
    alioss_http_domain: '',
    alioss_access_key: '',
    alioss_secret_key: '',
});
// 监听 storage 对象的变化并发射 update-storage 事件
// 这允许子组件将状态更改通知给父组件
watch(storage, (newValue) => {
    emit('update-storage', newValue);
}, { deep: true });
// 监听 store.state.system.store对象变化时赋值
watch(() => store.state.system.storage, (newStorage) => {
    storage.alioss_http_protocol = newStorage.alioss_http_protocol;
    storage.alioss_point = newStorage.alioss_point;
    storage.alioss_bucket = newStorage.alioss_bucket;
    storage.alioss_http_domain = newStorage.alioss_http_domain;
    storage.alioss_access_key = newStorage.alioss_access_key;
    storage.alioss_secret_key = newStorage.alioss_secret_key;
}, { deep: true, immediate: true });
</script>